<template>
	<el-row :gutter="20">
		<!-- 左侧部门树 -->
		<el-col :span="4" :xs="24">
			<ContentWrap class="h-1/1">
				<CommunityTree @node-click="handleCommunityNodeClick" />
			</ContentWrap>
		</el-col>
		<el-col :span="20" :xs="24">
			<!-- 搜索 -->
			<ContentWrap>
				<el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
					<el-form-item label="房屋名称" prop="keyWord">
						<el-input v-model="queryParams.keyWord" placeholder="请输入房屋名称" clearable @keyup.enter="handleQuery" class="!w-240px" />
					</el-form-item>
					<el-form-item>
						<el-button @click="handleQuery"><Icon icon="ep:search" />搜索</el-button>
						<el-button type="primary" plain @click="openForm('create', undefined, queryParams.commId)" v-hasPermi="['zwsj:house-room:create']"> <Icon icon="ep:plus" /> 新增 </el-button>
					</el-form-item>
				</el-form>
			</ContentWrap>
			<ContentWrap>
				<el-table v-loading="loading" :data="list" highlight-current-row>
					<el-table-column label="主键" align="center" prop="id" width="100" />
					<el-table-column label="社区名称" align="left" prop="community.name" width="160" />
					<el-table-column label="房屋地址" align="left" prop="name" min-width="300">
						<template #default="scope">
							<i style="margin-right: 10px; font-size: 14px; color: green" class="el-icon-s-order" @click="showHousePayElecDayReport(scope.row.id)">收支</i>
							<label>{{ scope.row.name }}</label>
						</template>
					</el-table-column>
					<el-table-column label="房间数量" align="center" prop="roomCount" width="80">
						<template #default="scope">
							<el-link type="primary" @click="goRooms(scope.row.id)">{{ scope.row.roomCount }}</el-link>
						</template>
					</el-table-column>
					<el-table-column label="电表数量" align="center" prop="meterCount" width="80" />
					<el-table-column label="水表数量" align="center" prop="waterCount" width="80" />
					<el-table-column label="操作" align="center" fixed="right" width="300">
						<template #default="scope">
							<el-button type="primary" link @click="synRooms(scope.row)" v-hasPermi="['zwsj:house-room:create']">同步(便民)房间</el-button>
							<el-button type="primary" link @click="configure(scope.row)" v-hasPermi="['zwsj:house-room:update']">批量配置</el-button>
							<el-button type="primary" link @click="openForm('update', scope.row.id)" v-hasPermi="['zwsj:house-room:update']">修改</el-button>
							<el-button link type="danger" @click="handleDelete(scope.row.id)" v-hasPermi="['zwsj:house-room:delete']">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				<Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize" @pagination="getList" />
			</ContentWrap>
		</el-col>
	</el-row>

	<!-- 添加或修改房屋对话框 -->
	<HouseForm ref="formRef" @success="getList" />
	<HousePayElecDayReport ref="housePayElecDayReportRef" />
	<Configuration ref="configureRef" />
</template>
<script lang="ts" setup>
	import * as HouseRoomApi from '@/api/zwsj/houseRoom'
	import HouseForm from './HouseForm.vue'
	import HousePayElecDayReport from './HousePayElecDayReport.vue'
	import Configuration from './Configuration.vue'
	import CommunityTree from '@/views/zwsj/common/CommunityTree.vue'
	import router from '@/router'
	import { ElNotification } from 'element-plus'

	defineOptions({ name: 'House' })

	const message = useMessage() // 消息弹窗
	const { t } = useI18n() // 国际化

	const loading = ref(true) // 列表的加载中
	const total = ref(0) // 列表的总页数
	const list = ref([]) // 列表的数
	const queryParams = reactive({
		pageNo: 1,
		pageSize: 10,
		parentId: 0,
		commId: undefined,
		keyWord: undefined,
	})
	const queryFormRef = ref() // 搜索的表单

	/** 查询列表 */
	const getList = async () => {
		loading.value = true
		try {
			const data = await HouseRoomApi.getHouseRoomPage(queryParams)
			list.value = data.list
			total.value = data.total
		} finally {
			loading.value = false
		}
	}

	/** 搜索按钮操作 */
	const handleQuery = () => {
		queryParams.pageNo = 1
		getList()
	}

	/** 重置按钮操作 */
	const resetQuery = () => {
		queryFormRef.value?.resetFields()
		handleQuery()
	}

	/** 处理部门被点击 */
	const handleCommunityNodeClick = async row => {
		queryParams.commId = row.id
		await getList()
	}

	/** 添加/修改操作 */
	const formRef = ref()
	const openForm = (type: string, id?: number, commId?: number) => {
		formRef.value.open(type, id, commId)
	}

	const configureRef = ref()
	/** 配置按钮操作 */
	const configure = (item?: object) => {
		configureRef.value.open(item)
	}

	/** 删除按钮操作 */
	const handleDelete = async (id: number) => {
		try {
			// 删除的二次确认
			await message.delConfirm()
			// 发起删除
			await HouseRoomApi.deleteHouseRoom(id)
			message.success(t('common.delSuccess'))
			// 刷新列表
			await getList()
		} catch {}
	}

	const goRooms = async (houseId: number) => {
		router.push(`/house-room/room/data/` + houseId)
	}

	const synRooms = async (item?: object) => {
		//需要判断地址编码是否为空
		let addrCode = item?.addrCode || ''
		if ('' === addrCode) {
			ElNotification({
				title: `失败}`,
				message: h('i', { style: 'color: teal' }, `地址编码不能为空，抽取房间数据失败`),
			})
			return
		}
		ElMessageBox.confirm('此操作将会把从福建公安便民中抽取房产对应的房间信息, 是否继续?', 'warning', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning',
		})
			.then(() => {
				HouseRoomApi.copyRoomsFromBm(addrCode).then(data => {
					if (data) {
						ElNotification({ type: 'success', title: `成功`, message: '数据抽取成功' })
						getList()
					}
				})
			})
			.catch(() => {})
	}

	const housePayElecDayReportRef = ref()
	const showHousePayElecDayReport = async (houseId: number) => {
		housePayElecDayReportRef.value.open(houseId)
	}

	/** 初始化 */
	onMounted(() => {
		getList()
	})
</script>
